<template>
  <view>
    <view class="header">

      <view @click="goToHome" hover-class="none" class="return">
        <image style="height: 60%;width: 40%;" src="/static/logo/返回.png"></image>
      </view>

      <view class="text">
        <text>道教建筑</text>
      </view>

      <view class="search">
        <image style="height: 80%;width: 40%;" src="/static/logo/搜索.png"></image>
      </view>
    </view>

    <view class="main">
      <swiper class="pic" indicator-dots="indicatorDots" autoplay="autoplay">
        <swiper-item>
          <view class="img1">
            <image style="width: 100%; height: 96%;"
                   src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%BB%BA%E7%AD%91/%E8%BD%AE%E6%92%AD1.png"></image>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="img2">
            <image style="width: 100%; height: 96%;"
                   src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%BB%BA%E7%AD%91/%E8%BD%AE%E6%92%AD2.png"></image>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="img3">
            <image style="width: 100%; height: 96%;"
                   src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%BB%BA%E7%AD%91/%E8%BD%AE%E6%92%AD3.png"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="article1">
      <view class="button" @click="goToDaoculture" >
        <image style="width: 50%;height: 100%;align-items: center;"
               src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%BB%BA%E7%AD%91/%E4%BA%86%E8%A7%A3%E8%AF%A6%E7%BB%86.png"></image>
      </view>
    </view>

    <view class="article2">
      <view @click="goToDaoculture" hover-class="none" class="upswiper">
        <floating-image class="uplogo">
          <image style="width: 60px;height: 40px;align-items: center;" src="/static/logo/上滑.png"></image>
        </floating-image>
        <floating-text class="upword">
          <text style="color: dimgray;font-size: 12px;">上滑了解更多</text>
        </floating-text>
      </view>
    </view>


  </view>
</template>

<script>
import FloatingImage from "./FloatingImage.vue";
import FloatingText from "./FloatingText.vue";

export default {
  components: {
    FloatingImage,
    FloatingText
  },
  methods: {
    goToHome() {
      uni.switchTab({
        url: '/pages/home/home'
      });
    },
    goToDaoculture() {
      uni.redirectTo({
        url: '/pages/daoculture/daoculture'
      });
    },
    goToNewPage() {
      this.$router.push("/parypage")
    }
  }
}
</script>

<style>
.header {
  margin-top: 10px;
  display: flex;
  height: 6vh;
  width: 100%;
  /* background-color: aquamarine; */
}

.return {
  display: flex;
  flex: 1;
  float: right;
  margin-left: 10px;
  justify-content: flex-start;
  /*水平居左*/
  align-items: center;
  /*垂直居左*/
}

.search {
  display: flex;
  flex: 1;
  float: left;
  margin-right: 10px;
  justify-content: flex-end;
  /*水平居右*/
  align-items: right;
  /*垂直居右*/
}

.text {
  display: flex;
  flex: 3;
  height: 100%;
  width: auto;
  font-size: 16px;
  justify-content: center;
  /*水平居中*/
  align-items: center;
  /*垂直居中*/
}

.main {
  display: flex;
  width: 100%;
  height: 65vh;
  margin-top: 30px;
}

.pic {
  display: flex;
  margin: auto;
  width: 70%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.img1,
.img2,
.img3 {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.article1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 7vh;
  margin-top: 20px;
}

.button {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  cursor: pointer;
}

.article2 {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  width: 100%;
  height: 8vh;
}

.upswiper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.uplogo {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 50%;
  justify-content: center;
  align-items: center;
}

.upword {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 50%;
  font-size: 12px;
  justify-content: center;
  align-items: center;
}
</style>
